<template>
	<transition name="slide" >
		<!-- <div class="singer-detail"> </div> -->
		<music-list 
			:title="title" 
			:bg-image="bgImage" 
			:songs="songs">
		</music-list>
		<router-view></router-view>
  </transition>
</template>

<script >
  import MusicList from 'components/music-list/music-list'
  // import {getSingerDetail} from 'api/singer'
  import {ERR_OK,ERR_GO} from 'api/config'
  // import {createSong} from 'common/js/song'
  import {mapGetters,mapMutations} from 'vuex'
	import axios from 'axios'
  export default {
    computed: { //这是从singer歌手页面传递过来的点击数据
      title() {
        return this.singer.name
      },
      bgImage(){
				return this.singer.avatar
      },
      ...mapGetters([
        'singer',
				'sosid'
      ])
    },
    data() {
      return {
        songs: []
      }
    },
    created() {
      this._getDetail()
    },
    methods: {
      _getDetail() {
        if (!this.singer.id) {//没有用户id 回退到主页面
          this.$router.push('/singer')
          return
        }
				console.log('this.singer.name',this.singer.name)
				if(this.singer.name){
				let url=`https://api.bzqll.com/music/tencent/search?key=579621905&s=${this.singer.name}&limit=100&offset=0&type=song`
				axios.get(url).then((res)=>{
					if (res.data.code === ERR_GO) {
							this.songs = this._normalizeSongs(res.data.data)
					}
				}).catch(function(reason) {
					console.log('singer-detail:',"没有用户id 回退到主页面" );
				});		}
      },
			
      _normalizeSongs(list) {
        let ret = []
        list.forEach((item) => {
					  ret.push(item)
        })
        return ret
      },    
      ...mapMutations({
				issosbtn:'issosbtn'
			}),
    },
    components: {
      MusicList
    },
		destroyed: function () {//改变状态
       this.issosbtn(1) 
    },
  }
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s
  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>
